<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名">
            <el-input v-model="formInline.username" placeholder="用户名" clearable />
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="formInline.region" placeholder="状态" clearable>
                <el-option label="正常" value="shanghai" />
                <el-option label="禁用" value="beijing" />
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
        <el-table-column label="操作" width="200">
            <template #default>
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="danger" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="total" />
</template>
  
<script setup>
import { ref } from 'vue'
import userApi from '../../api/user.js' 
// import store from '../../stores/index'

// store.useUserStore

let total = ref(1000)

//搜索条件对象
let formInline = ref({
    username: '',
    region: '',
    date: '',
})

const onSubmit = () => {
    userApi.selectUserList(formInline).then(() => {

    })
}
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    }
]
</script>
  
<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}
</style>
  